<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  div {
    position: absolute;
    background: blue;
  }
</style>
<body>
<div id="div">div1</div>
<script>
  var tween = {
    linear: function (t, b, c, d) {
      return c * t / d + b;
    },
    easeIn: function (t, b, c, d) {
      return c * (t /= d) * t + b;
    },
    strongEaseIn: function (t, b, c, d) {
      return c * (t /= d) * t * t * t * t + b;
    },
    strongEaseOut: function (t, b, c, d) {
      return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    sineaseIn: function (t, b, c, d) {
      return c * (t /= d) * t * t + b;
    },
    sineaseOut: function (t, b, c, d) {
      return c * ((t = t / d - 1) * t * t + 1) + b;
    }
  };
  var Animate = function (dom) {
    this.dom = dom;
    this.startTime = 0;
    this.startPos = 0;
    this.endPos = 0;
    this.propertyName = null;
    this.easing = null;
    this.duration = null;
  }

  Animate.prototype.start = function (propertyName, endPos, duration, easing) {
    this.startTime = +new Date;
    this.startPos = this.dom.getBoundingClientRect()[propertyName];
    this.propertyName = propertyName;
    this.endPos = endPos;
    this.duration = duration;
    this.easing = tween[easing]
    var self = this;
    var timeId = setInterval(function () {
      if (self.step() === false) {
        clearInterval(timeId)
      }
    }, 19)
  }
  Animate.prototype.step = function () {
    var t = +new Date;
    if (t >= this.startTime + this.duration) {
      this.update(this.endPos)
      return false
    }

    var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration)
    this.update(pos)
  }
  Animate.prototype.update = function (pos) {
    this.dom.style[this.propertyName] = `${pos}px`;
  }
  var div = document.querySelector('#div')
  var animate = new Animate(div)
  animate.start('left', 500, 1000, 'strongEaseOut')
</script>
</body>
</html>
